import { Ref } from "vue";
import "./index.scss";
export default defineComponent({
	props: [],
	emits: [],
	setup() {
		const deviceTypeTotal: any = inject("deviceTypeTotal");
		const deviceTotal: any = inject("deviceTotal");
		let colors = reactive(["#E2FDFF", "#60F4FF", "#75FE03", "#FFE32D", "#FF9B37", "#FF5151", "#0070cc", "#2beaab"]);
		let chartData = ref<any>([]);
		watch(
			() => ({
				...deviceTypeTotal
			}),
			val => {
				chartData.value = [];
				Object.entries(val).forEach((item: Array<any>, i: number) => {
					let info = item[1] as any;
					if (info.productName.includes("配电柜")) {
						return;
					}
					info.color = colors[i];
					chartData.value.push(info);
				});
			}
		);
		return () => {
			return (
				<div class="rightDev">
					<div class="c">
						<div class="echarts">
							<Pie chartData={chartData.value} />
							<div class="totals">
								<p>{deviceTotal.total}</p>
							</div>
						</div>
						<div class="c-bg"></div>
					</div>
					<div class="r overflow-auto">
						{chartData.value.map((item: any) => {
							return (
								<dl>
									<dt style={{ background: item.color }}></dt>
									<dd>{item.productName}</dd>
								</dl>
							);
						})}
					</div>
				</div>
			);
		};
	}
});
import Echarts from "@/components/Echart";
import { PropType } from "vue";
const Pie = defineComponent({
	props: { chartData: { type: Object as PropType<any> } },
	setup(props) {
		let echartRef = ref();
		let option = reactive({
			tooltip: {
				trigger: "item"
			},
			series: [
				{
					name: "设备类型分布",
					type: "pie",
					radius: ["40%", "70%"],
					avoidLabelOverlap: false,
					itemStyle: {
						borderRadius: 2,
						borderColor: "#0B2B51",
						borderWidth: 1
					},
					colorBy: "data",
					data: [
						{
							value: 9,
							name: "配电柜",
							itemStyle: { color: "#E2FDFF" },
							label: {
								show: false,
								fontSize: 15,
								color: "#fff",
								fontWeight: 500,
								formatter(param: any) {
									// correct the percentage
									return param.name + "\n" + "\n" + param.value;
								}
							},
							labelLine: { show: false, length: 15 }
						},
						{
							value: 5,
							name: "空调",
							itemStyle: { color: "#5EFFB4" },
							label: {
								show: false,
								fontSize: 15,
								color: "#fff",
								fontWeight: 500,
								formatter(param: any) {
									// correct the percentage
									return param.name + "\n" + "\n" + param.value;
								}
							},
							labelLine: { show: false, length: 15 }
						},
						{
							value: 2,
							name: "温湿度",
							itemStyle: { color: "#FF9B37" },
							label: {
								show: false,
								fontSize: 15,
								color: "#fff",
								fontWeight: 500,
								formatter(param: any) {
									// correct the percentage
									return param.name + "\n" + "\n" + param.value;
								}
							},
							labelLine: { show: false, length: 15 }
						},
						{
							value: 4,
							name: "漏水控制器",
							itemStyle: { color: "#60F4FF" },
							label: {
								show: false,
								fontSize: 15,
								color: "#fff",
								fontWeight: 500,
								formatter(param: any) {
									// correct the percentage
									return param.name + "\n" + "\n" + param.value;
								}
							},
							labelLine: { show: false, length: 5 }
						},
						{
							value: 23,
							name: "消防烟感",
							itemStyle: { color: "#FFE32D" },
							label: {
								show: false,
								fontSize: 15,
								color: "#fff",
								fontWeight: 500,
								formatter(param: any) {
									// correct the percentage
									return param.name + "\n" + "\n" + param.value;
								}
							},
							labelLine: { show: false, length: 15 }
						},
						{
							value: 7,
							name: "发电机",
							itemStyle: { color: "#FF5151" },
							label: {
								show: false,
								fontSize: 15,
								color: "#fff",
								fontWeight: 500,
								formatter(param: any) {
									// correct the percentage
									return param.name + "\n" + "\n" + param.value;
								}
							},
							labelLine: { show: false, length: 15 }
						}
					]
				}
			]
		});

		watch(
			() => ({ ...props.chartData }),
			() => {
				let seriesData: any[] = [];
				props.chartData?.forEach((item: any) => {
					seriesData.push({
						value: item.total,
						name: item.productName,
						itemStyle: { color: item.color },
						label: {
							show: false,
							fontSize: 15,
							color: "#fff",
							fontWeight: 500,
							formatter(param: any) {
								// correct the percentage
								return param.name + "\n" + "\n" + param.value;
							}
						},
						labelLine: { show: false, length: 15 }
					});
					option.series[0].data = seriesData;
					echartRef.value.setOption(option);
				});
			}
		);
		let currentIndex = -1;
		let timers: Ref<NodeJS.Timer | undefined> = ref(undefined);
		const intervalEvent = () => {
			timers.value = setInterval(() => {
				let dataLen = option.series[0].data.length;
				// 取消之前高亮的图形
				echartRef.value
					? echartRef.value.getEchartEntity().dispatchAction({
							type: "downplay",
							seriesIndex: 0,
							dataIndex: currentIndex
					  })
					: "";
				if (currentIndex > -1) {
					option.series[0].data[currentIndex].labelLine ? (option.series[0].data[currentIndex].labelLine.show = false) : "";
					option.series[0].data[currentIndex].label ? (option.series[0].data[currentIndex].label.show = false) : "";
				}

				currentIndex = (currentIndex + 1) % dataLen;
				// 高亮当前图形
				echartRef.value
					? echartRef.value.getEchartEntity().dispatchAction({
							type: "highlight",
							seriesIndex: 0,
							dataIndex: currentIndex
					  })
					: "";
				option.series[0].data[currentIndex].labelLine ? (option.series[0].data[currentIndex].labelLine.show = true) : "";
				option.series[0].data[currentIndex].label ? (option.series[0].data[currentIndex].label.show = true) : "";
				echartRef.value?.getEchartEntity()?.setOption(option);
			}, 2000);
		};
		onMounted(() => {
			setTimeout(() => {
				echartRef.value.setOption(option);
				echartRef.value.chartInit();
				intervalEvent();
			});
		});
		onUnmounted(() => {
			clearInterval(timers.value);
		});
		return () => <Echarts ref={echartRef} />;
	}
});
